<template>
  <div class="shopguan">
    <!-- 商品管理 -->
    <div style="margin-top: 20px;margin-bottom: 20px; padding-left: 40px;">
    <el-button type="success" @click="$router.push('/addshop')"><el-icon><Plus /></el-icon>新增商品</el-button>
  </div>
  <el-divider />
    <!-- 分类界面 -->
  <el-table
    ref="multipleTableRef"
    :data="state.tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="80" />
    <el-table-column property="num" label="商品编号" width="180">
    </el-table-column>
    <el-table-column property="name" label="商品名" width="180" />
    <el-table-column property="introduce" label="商品简介" width="180" />
    <el-table-column  label="商品图片" width="180">
      <template #default="scope">
          <img style="width: 100px; height: 100px;" :src="scope.row.img" >
        </template>
    </el-table-column>
    <el-table-column property="inventory" label="商品库存" width="180" />
    <el-table-column property="price" label="商品价格" width="180" />
    <el-table-column property="state" label="上架状态" show-overflow-tooltip />
    <el-table-column fixed="right" label="操作" width="180" >  
      <template #default>
        <el-button link type="primary" size="small" @click="$router.push('/addshop')">修改</el-button>
        <el-button link type="primary" size="small" @click="open">上架</el-button>
      </template>
    </el-table-column>
</el-table>
  <!-- 分页 -->
  <div class="Pagination">
    <el-pagination background layout="prev, pager, next" :total="15" />
  </div>
  </div>
</template>
<script setup>
import axios from 'axios' 
import { ref,reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
const form = reactive({
  type: [],
  tableData:[]
})
/* 内容定义 */
const state = reactive({
  tableData: [], // 数据列表
})
onMounted(() => {
  getCategory()
})
const getCategory= () => {
  axios.get('http://rap2api.taobao.org/app/mock/308829/api/shopguan')      
.then((res) => {
console.log(res)
state.tableData = res.data.shopguan
//  console.log(tableData)
})
}
const open = () => {
  ElMessageBox.confirm("你确定要上架这个商品？", "商品", {
    confirmButtonText: "上架",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "上架成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "上架失败",
      });
    });
};
</script>
<style lang="less" scoped>
.Pagination{
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
